<template>
  <div>
    <div id="ss" class="sample-spreadsheets"></div>
  </div>
</template>
<script>
  import GC from '@grapecity/spread-sheets'
  import formData from '@/mock/formData.json'
  export default {
    data() {
      return {

      }
    },
    created() {
      var spread = new GC.Spread.Sheets.Workbook(this._getElementById('ss'));
      this.initSpread(spread);
    },
    methods: {
      // _getElementById('btnAddSheet').addEventListener('click', function() {
      //   spread.addSheet(spread.getSheetCount());
      // }),

      // _getElementById('btnRemoveSheet').addEventListener('click', function() {
      //   if (spread.getSheetCount() > 0) {
      //     spread.removeSheet(0);
      //   }
      // }),

      // _getElementById('btnClearSheets').addEventListener('click', function() {
      //   spread.clearSheets();
      // }),

      initSpread(spread) {
        var sd = formData;
        var sheet = spread.getActiveSheet();
        if (sd.length > 0) {
          sheet.setDataSource(sd);
        }
        sheet.setColumnWidth(0, 160);
        sheet.setColumnWidth(1, 70);
        sheet.setColumnWidth(2, 90);
        sheet.setColumnWidth(3, 110);
        sheet.setColumnWidth(4, 80);
        sheet.setColumnWidth(6, 110);
      },
      _getElementById(id) {
        return document.getElementById(id);
      }
    }
  }
</script>
<style scoped>
  .sample-tutorial {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .sample-spreadsheets {
    width: calc(100% - 280px);
    height: 100%;
    overflow: hidden;
    float: left;
  }

  .options-container {
    float: right;
    width: 280px;
    padding: 12px;
    height: 100%;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
  }

  .option-row {
    font-size: 14px;
    padding: 5px;
    margin-top: 10px;
  }

  label {
    display: block;
    margin-bottom: 6px;
  }

  input {
    padding: 4px 6px;
  }

  input[type=button] {
    margin-top: 6px;
    display: block;
  }

  body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>